<template>
  <div class="box_home">
    <el-tabs v-model="activeName" type="card" @tab-click="handleClick">
      <el-tab-pane label="用户管理" name="first">
        <div>1111</div>
      </el-tab-pane>
      <el-tab-pane label="图表显示" name="second">
        <div class="pie_box">
          <div id="exeBox"></div>
        </div>
      </el-tab-pane>
    </el-tabs>
  </div>
</template>

<script>
import * as echarts from 'echarts'
export default {
  data() {
    return {
      activeName: 'first'
    }
  },
  mounted() {
    this.getPieExe();
  },
  methods: {
    handleClick(tab, event) {
      console.log(tab, event);
      console.log(this.activeName)
      this.$nextTick(function () {
        var myEvent = new Event("resize");
        window.dispatchEvent(myEvent);
      })
    },
    getPieExe() {
      let chartDom = document.getElementById('exeBox');
      let myChartExe = echarts.init(chartDom);
      myChartExe.resize();
      let option;
      option = {
        grid: {
          containLabel: true,
          bottom: '10%',
          top: '20%',
          left: '5%',
          right: '5%',
        },
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'shadow',
          },
        },
        legend: {
          top: 10,
          data: ['运动量', '电压(V)'],
          itemWidth: 12,
          itemHeight: 12,
          itemGap: 30,
          textStyle: {
            fontSize: 12,
            color: '#333',
            padding: [0, 0, 0, 10],
          },
        },
        xAxis: {
          triggerEvent: true,
          data: [
            '12-4 12:00',
            '12-4 13:00',
            '12-4 14:00',
            '12-4 15:00',
            '12-4 16:00',
            '12-4 17:00',
            '12-4 18:00',
            '12-4 19:00',
            '12-4 20:00',
            '12-4 21:00',
            '12-4 22:00',
            '12-4 23:00'
          ],
          axisLabel: {
            interval: 0,
            show: true,
            fontSize: 14,
            color: '#000',
          },
          axisLine: {
            show: false,
            lineStyle: {
              show: false,
              color: '#000',
              width: 2,
            },
          },

          axisTick: {
            show: false,
          },
        },
        yAxis: [
          {
            name: '运动量',
            type: 'value',
            nameTextStyle: {
              color: '#444444',
            },
            max: 3000,
            min: 0,
            position: 'right',
            splitNumber: 4,
            axisLabel: {
              show: true,
              fontSize: 14,
              color: '#000',
              // formatter: function (value) {
              //   // 在标签后面添加百分号
              //   return value + '%';
              // },
            },
            axisLine: {
              show: false,
            },
            axisTick: {
              show: false,
            },
            splitLine: {
              lineStyle: {
                type: 'dashed',
                color: '#E8E8E8',
              },
            },
          },
          {
            name: '温度',
            type: 'value',
            nameTextStyle: {
              color: '#444444',
            },
            splitNumber: 4,
            max: 60,
            min: 0,
            position: 'left', // 放在右边
            axisLabel: {
              show: true,
              fontSize: 14,
              color: '#000',
              // formatter: function (value) {
              //   // 在标签后面添加百分号
              //   return value + '%';
              // },
            },
            axisLine: {
              show: false,
            },
            axisTick: {
              show: false,
            },
            splitLine: {
              lineStyle: {
                type: 'dashed',
                color: '#E8E8E8',
              },
            },
          },
        ],
        dataZoom: [
          {
            type: 'inside',
            start: 0,
            end: 50
          },
          {
            start: 0,
            end: 50
          }
        ],
        series: [
          {
            name: '运动量',
            type: 'bar',
            silent: true,
            itemStyle: {
              color: '#2E5BFF',
            },
            barWidth: 30,
            data: [2010, 1108, 1200, 1840, 2110, 1130, 1182, 2345, 2247, 2910, 2151, 2749],
            // label: {
            //   show: true, // 显示标签
            //   position: 'top', // 标签显示在柱状图的上方
            //   fontSize: 14,
            //   color: '#fff',
            //   formatter: function (params) {
            //     // 在标签文本后添加百分号
            //     return params.value + '%';
            //   },
            // },
          },
          {
            name: '电压(V)',
            type: 'line',
            yAxisIndex: 1, // 与第二个 y 轴关联
            itemStyle: {
              color: '#6B42F6', // 设置折线颜色为黄色
            },
            symbolSize: 8,
            symbol: 'circle',
            areaStyle: {
              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                {
                  offset: 1,
                  color: 'rgba(240, 237, 254,0.1)'
                },
                {
                  offset: 0,
                  color: 'rgba(107, 66, 246,0.1)'
                }
              ])
            },
            data: [3.172, 3.95, 12, 10, 34, 35, 27, 24, 23, 20, 18, 15], // 折线图的数据
          },
        ],
      }
      option && myChartExe.setOption(option);
      window.addEventListener('resize', () => {
        myChartExe.resize()
      })
    },
  }
}
</script>

<style lang="scss" scoped>
.pie_box {
  width: 100%;
  height: 400px;
  background-color: #fff;

  #exeBox {
    width: 100%;
    height: 100%;
  }
}
</style>